<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="example">
        
        <label for="">添加到任务列表:</label>
        <input type="text" v-model="newItem"><input type="button" value="添加" @click='addLists'>
        <ul>
            <li v-for="(item,index) in lists">{{item.women}} <input type="button"value="移除" @click='moveLists'>

            </li>
        </ul>
    </div>
   
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var example=new Vue({
        el:'#example',
        data:{
            newItem:'',
            lists:[
                {
                    id:1,
                    women:'杨玉环'
                },{
                    id:2,
                    women:'西施'
                },{
                    id:3,
                    women:'貂蝉'
                },{
                    id:4,
                    women:'王昭君'
                },
            ],
           
        },
        methods:{
            addLists:function(){
                let obj={
                    id:this.lists.length+1,
                    women:this.newItem
                }
                this.lists.push(obj),
                this.newItem=''
            },
            moveLists:function(){
                
            }
        }
    })

</script>
</html>